<!DOCTYPE html>
<html>
<head>
	<title>慕课手机</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/base.css">
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<link rel="stylesheet" type="text/css" href="css/animate.css">
</head>
<body>
<div class="header">
	<div class="header__wrap">
		<div class="header__logo">慕课手机</div>
		<nav class="header__nav">
			<a href="javascript:;" class="header__nav__item">首页</a>
			<a href="javascript:;" class="header__nav__item">外观</a>
			<a href="javascript:;" class="header__nav__item">配置</a>
			<a href="javascript:;" class="header__nav__item">型号</a>
			<a href="javascript:;" class="header__nav__item">说明</a>
			<a href="javascript:;" class="header__nav__item header__nav__item_custem_button">立即购买</a>
			<div class="header__nav__tip"></div>
		</nav>
	</div>
	
</div>

<div class="screen-1">
	<h2 class="screen-1__heading screen-1__heading_animate_init"><b>慕课手机</b>让你的生活更精彩</h2>
	<div class="screen-1__phone screen-1__phone_animate_init"></div>
	<div class="screen-1__shadow screen-1__shadow_animate_init"></div>
</div>

<div class="screen-2">
	<h2 class="screen-2__heading">优美的设计，更令人着迷</h2>
	<h3 class="screen-2__subheading">采用受欢迎的设计，让它更出色。<br>
	款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。</h3>
	<div class="screen-2__phone">
		<div class="screen-2__point screen-2__point_i_1">高清摄像</div>
		<div class="screen-2__point screen-2__point_custem_right screen-2__point_i_2">超薄机身</div>
		<div class="screen-2__point screen-2__point_custem_right screen-2__point_i_3">大屏显示</div>
	</div>
</div>

<div class="screen-3">
	<div class="screen-3__wrap">
		<h2 class="screen-3__heading">外形小巧，功能强大的手机</h2>
		<h3 class="screen-3__subheading">采用受欢迎的设计，让它更加出色。<br>
		款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。</h3>
		<div class="screen-3__features">
			<div class="screen-3__features__item">
				<div class="screen-3__features__item__number">5.7</div>
				<div class="screen-3__features__item__desc">英寸大屏</div>
			</div>
			<div class="screen-3__features__item">
				<div class="screen-3__features__item__number">1200</div>
				<div class="screen-3__features__item__desc">万像素</div>
			</div>
			<div class="screen-3__features__item">
				<div class="screen-3__features__item__number">3D</div>
				<div class="screen-3__features__item__desc">touch</div>
			</div>
			<div class="screen-3__features__item">
				<div class="screen-3__features__item__number">A9</div>
				<div class="screen-3__features__item__desc">处理器</div>
			</div>
		</div>
		<div class="screen-3__phone"></div>
	</div>	
</div>	
<div class="screen-4">
	<div class="screen-4__wrap">
		<h2 class="screen-4__heading">丰富的手机型号</h2>
		<h3 class="screen-4__subheading">选择适合你的手机</h3>
		<div class="screen-4__type">
			<div class="screen-4__type__item screen-4__type__item_i_1">
				<div class="screen-4__type__item__color">慕课红</div>
				<div class="screen-4__type__item__storage">16G/32G/64G</div>
			</div>
			<div class="screen-4__type__item screen-4__type__item_i_2">
				<div class="screen-4__type__item__color">土豪金</div>
				<div class="screen-4__type__item__storage">16G/32G/64G</div>
			</div>
			<div class="screen-4__type__item screen-4__type__item_i_3">
				<div class="screen-4__type__item__color">太空灰</div>
				<div class="screen-4__type__item__storage">16G/32G/64G</div>
			</div>
			<div class="screen-4__type__item screen-4__type__item_i_4">
				<div class="screen-4__type__item__color">绅士黑</div>
				<div class="screen-4__type__item__storage">16G/32G/64G</div>
			</div>
		</div>
	</div>		
</div>

<div class="screen-5">
	<h2 class="screen-5__heading">游戏、学习、拍照，有这一部就够了</h2>
	<h3 class="screen-5__subheading">看视频、拍摄高清视频与照片、视频聊天、一机多功能，让您生活更丰富精彩。</h3>
	<div class="screen-5__bg"></div>
</div>
<div class="screen-buy">
	<a href="javascript:;" class="screen-buy__button">点击购买</a>
</div>
<footer class="footer">牟大师版权所有 @2018</footer>

<div class="outline">
	<a href="javascript:;" class="outline__item">首页</a>
	<a href="javascript:;" class="outline__item">外观</a>
	<a href="javascript:;" class="outline__item">配置</a>
	<a href="javascript:;" class="outline__item">型号</a>
	<a href="javascript:;" class="outline__item">说明</a>
</div>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>